﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>动态属性Props，可以将父组件的数据传递给子组件，从而达到父子通讯的目的</p>
    <div id="contain">
        <!--<child message="我爱一米阳光"></child>-->

        <childs messages="老张的哲学"></childs>

        <chht :lists="lists" :run="run">
            <template slot-scope="a">
                {{a}}
            </template>
        </chht>
    </div>
WW
    <div id="footId">
        <footer-vue :foo="author"></footer-vue>   <!--自定义的组件上，新增一个动态属性，然后属性的值 author 是父组件的，这个时候父组件就是已经把值给发过去了-->
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 定义一个名为 footer-vue 的新组件
        Vue.component('footer-vue', {
            template: `
               <div id="footer-vue">
                    <p>2018 <a href="#">一米阳光@博客</a> - 校园网签有限公司 <a href="#" style="font-weight: bold">CopyRight</a></p>
                    <p>
                        <a href="#">京ICP备242344249号  {{foo}}</a>
                    </p>
                </div>
                  `,
            props: ['foo'],//这里根据组件的props属性，来被动接受组件传递来的参数
            data() {
                return {
                    message: 'hello world'
                }
            }
        })
        new Vue({
            el:'#footId'
        })

        Vue.component('childs', {
            // 声明 props
            props: ['messages'],  //注释掉的话，下面模板传递的messages值会报错
            // 就像 data 一样，prop 也可以在模板中使用
            // 同样也可以在 vm 实例中通过 this.message 来使用
            template: '<span>{{ messages }}</span>'
        })


        var test = new Vue({
            el: '#contain',
            data: {
                now: '',
                lists: [
                    { id: 1, name: '孙悟空' },
                    { id: 2, name: '猪八戒' },
                    { id: 3, name: '沙和尚' },
                    { id: 4, name: '唐僧' },
                    { id: 5, name: '小白龙' },
                ],

                answer: 'Time is:'
            },
            watch: {

            },
            methods: {
                run() {
                    console.log(66);
                }
            },
            mounted() {
                //this.now=this.dateFtt("yyyy-MM-dd hh:mm:ss",new Date());;

            }
        })

        Vue.component('chht', {
            props: ['lists', 'run'],
            methods: {
                testRun() {
                    this.run();
                }
            },
            template: `
                 <div @click='testRun'>
                    <ul>
                        <li v-for="list in lists">
                            <slot :bbbbb="list"></slot>
                        </li>
                    </ul>
                </div>
                `
        })

        var name = new Vue({
            el: '#contain'
        })
    </script>
</body>
</html>